.bxfans{
    .bxfans-tab{
        display: flex;
        height: 44px;
        line-height: 44px;
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 5;
        
        .tab-item{
            flex: 1;
            text-align: center;
            position: relative;
            color: #000;
            font-weight: bold;
            .borderBottom{
                width: 48rpx;
                position: absolute;
                height: 6rpx;
                border-radius: 10rpx;
                display: block;
                position: absolute;
                left: 50%;
                margin-left: -24rpx;
                bottom: 10rpx;
                background-color: #000;
            }
        }
    }
    .content{
        .list{
            .list-top{
              padding: 24rpx 24rpx;
              background-color: #fff;
              margin-top: 20rpx;
              @include flex;
              align-items: center;
            }
            .list_bottom{
                position: relative;
                top: -10rpx;
                background-color: #fff;
                @include flex;
                justify-content: space-between;
                padding: 16rpx 62rpx;
                align-items: center;
                border-top: 1px solid $color-border;
                // border-radius: 20rpx;
                .border_r{
                    padding: 32rpx 2rpx 32rpx 0;
                    // background-color: #eaeaea;
                }
                .bottom_box{
                    text-align: center;
                    .text{
                        color: #666;
                    }
                }
            }
            .bixuan_icon{
                width: 98rpx;
                height: 98rpx;
                margin-right: 32rpx;
                border-radius: 50%;
            }
            .head-box{
              position: relative;
            }
            .vip_icon{
              position: absolute;
              right: 32rpx;
              bottom: 0;
              width: 40rpx;
              height: 40rpx;
            }
            .mid{
                @include sub-item;
                color: #000;
                font-size: 28rpx;
                font-weight: bold;
                line-height: 46rpx;
                .orderNo{
                    @include text-ellipsis;
                    font-size: 24rpx;
                    color: #999;
                    font-weight: normal;
                }
                .phone_box{
                    @include flex;
                    font-weight: normal;
                    color: #000;
                    align-items: center;
                    .phone_button{
                      @include extend-click;
                      .phone_icon{
                        width: 32rpx;
                        height: 32rpx;
                        margin-left: 24rpx;
                      }
                    }
                    
                    .edit_icon{
                        width: 30rpx;
                        height: 30rpx;
                        padding: 8rpx 30rpx;
                    }
                }
               
            }
            .downUp{
                width: 32rpx;
                height: 32rpx;
                padding: 20rpx;
            }
            .set{
                width: 150rpx;
                text-align: center;
                .todoBtn{
                    height: 52rpx;
                    line-height: 52rpx;
                    background-color: #ff759f;
                    color: #fff;
                    border-color: #ff759f;
                    border-radius: 52rpx;
                    margin-bottom: 20rpx;
                }
                .logoutBtn{
                    height: 52rpx;
                    line-height: 52rpx;
                    background-color:#fff;
                    color:#666;
                    border:1px solid  #666;
                    border-radius: 52rpx;
                }
                .activated{
                    border:1px solid #ff759f;
                    color: #ff759f;
                    height: 52rpx;
                    line-height: 52rpx;
                    background-color:#fff;
                    border-radius: 52rpx;
                }
            }
          
        }
    }
    .nomore{
        text-align: center;
        color: #999;
        padding: 20rpx 0;
    }
    .empty_view{
      @include sub-item;
      margin: 0 auto;
      width: 240rpx;
      height:240rpx;
      margin-top: 35vh;
      .empty_img{
          width: 240rpx;
          height: 240rpx;
      }
      .tit{
          color: #000;
          margin-top: 10rpx;
          text-align: center;
          font-size: 28rpx;
      }
    }
    .popupBox{
        background-color: #fff;
        width: 600rpx;
        margin: 0 auto;
        padding: 50rpx 30rpx;
        border-radius: 20rpx;
        .popTitle{
            font-size: 50rpx;
            color: #000000;
        }
        .popText{
            color: #666;
            font-size: 28rpx;
            height: 60rpx;
            line-height: 60rpx;
        }
        .popupInfo{
            padding: 20rpx 0;
            border-bottom: 1px solid #eee;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 28rpx;
            @include flex;
            justify-content: space-between;
            .input{
                @include sub-item;
            }
            .code{
                width: 150rpx;
                color: #FF759F;
            }
            .deleteIcon{
                width: 30rpx;
                height: 30rpx;
                padding: 10rpx 20rpx;
            }
        }
        .popupBtn{
            @include flex;
            justify-content: space-between;
            margin-top: 40rpx;
            .cancle{
                padding: 20rpx 110rpx;
                border: 2rpx solid #666;
                border-radius: 60rpx;
            }
            .sure{
                padding: 20rpx 110rpx;
                background-color: #ddd;
                border-radius: 60rpx;
                color: #fff;
            }
            .beAble {
                background-color: #FF759F;
            }
        }
    }
    .popupPhoneBox{
        background-color: #fff;
        width: 580rpx;
        margin: 0 auto;
        padding: 60rpx 30rpx;
        border-radius: 20rpx;
        .title{
            text-align: left;
            font-size: 42rpx;
            font-weight: bold;
            color: #000000;
            margin-bottom: 60rpx;
        }
        .popupInfo{
            padding: 60rpx 0 20rpx;
            border-bottom: 1px solid #B7B7B7;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 28rpx;
            @include flex;
            justify-content: space-between;
            .placeholderStyle{
                color:#C5C5C5;
            }
            .input{
                @include sub-item;
            }
        }
        .text{
            font-size: 22rpx;
            color: #007FFF;
            text-align: left;
            height: 60rpx;
            line-height: 60rpx;
        }
        .popupBtn{
            @include flex;
            justify-content: space-between;
            margin-top: 40rpx;
            .cancle{
                padding: 20rpx 100rpx;
                border: 2rpx solid #999999;
                border-radius: 60rpx;
            }
            .sure{
                padding: 20rpx 100rpx;
                background-color: #DDDDDD;
                border-radius: 60rpx;
                color: #fff;
            }
            .beAble {
                background-color: #FF759F;
            }
        }
    }
    .searchBtn{
      position: fixed;
      width: 80rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 50%;
      background-color: #fff;
      box-shadow:3px 4px 10px 0px rgba(0, 0, 0, 0.2);
      bottom:300rpx;
      bottom: calc(300rpx + constant(safe-area-inset-bottom));
      bottom: calc(300rpx + env(safe-area-inset-bottom));
      right: 34rpx;
      z-index: 99;
  }
  .propClass{
      background-color: #fff;
      .p-30{
          padding: 26rpx;
      }
      .title{
        font-size: 28rpx;
        font-weight: 500;
      }
      .search{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-items: flex-start;
          .searchTit{
              width: 160rpx;
              line-height: 66rpx;
              height: 66rpx;
              text-align: center;
              background-color: #f5f5f5;
              margin: 30rpx 18rpx 0rpx 0rpx;
              &:nth-child(4) {
                margin-right: 0;
              }
              // flex: 1;
          }
          .active2{
              background-color: #000;
              color: #fff;
          }
      }
      .pickerTit{
        font-weight: 500;
        margin: 40rpx 0 30rpx 0;
      }
      .pickerView{
          @include flex;
          .pickerTime{
              padding: 15rpx 40rpx;
              color: #999;
              background-color: #f5f5f5;
              // border: 1px solid #E4E4E4;
              // border-radius:50rpx;
              margin-right:40rpx ;
              font-size: 26rpx;
              position: relative;   
          }
          .aniPicker{
              -webkit-animation: icon-bounce 0.5s forwards;
              -moz-animation: icon-bounce 0.5s forwards;
              -o-animation: icon-bounce 0.5s forwards;
              animation: icon-bounce 0.5s forwards;
          }
  
      }
      .chooseButton{
          display: flex;
          margin-top: 40rpx;
          flex-direction: row;
          // border-top: 1px solid #E4E4E4;
          .sureBtn{
              background-color: #000;
              height: 88rpx;
              line-height: 88rpx;
              text-align: center;
              flex: 1;
              color:#fff;
              font-size: 30rpx;
          }
          .resetBtn{
              background-color: #fff;
              color: #000000;
          }
      }
  }
  @keyframes icon-bounce {
      0%,100% {
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
      }
      10%,
      30%,
      50%,
      70%,
      90% {
        -moz-transform: translateX(5px);
        -ms-transform: translateX(5px);
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
      }
      20%,
      40%,
      60%,
      80%{
        -moz-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
      }
    }
}

